<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务五：基础JavaScript练习（二）</title>
    <link type="text/css" rel="stylesheet" href="../../public/css/style.css"/>
</head>
<style>
    #sequence {
        margin-top: 120px;
        font-size: 18px;
        transform: rotateX(180deg);
    }

    #sequence div {
        position: relative;
        float: left;
        background-color: red;
        margin-left: 10px;
        cursor: pointer;
        width: 20px;
    }

    button {
        cursor: pointer;
    }
</style>
<body>
<div class="nav">
    <a href="https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务五：基础JavaScript练习（二）/index.html"
       target="_blank">demo源码</a>
    <a href="http://ife.baidu.com/course/detail/id/105">查看原题</a>
    <a href="http://ife.giscafer.com">返回demo演示站</a>
</div>
<div id="code-display">
    <p>基于上一任务</p>
    <p>限制输入的数字在10-100</p>
    <p>队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示</p>
    <p>队列展现方式变化如图，直接用高度表示数字大小；</p>
    <p>实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来，参考见下方参考资料；</p>
</div>

<div id="source">
    <h2>demo演示</h2>
    <div>
        <input type="text" id="in"/>
        <button onclick="insertLeft()">左侧入</button>
        <button onclick="insertRight()">右侧入</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="removeLeft()">左侧出</button>
        <button onclick="removeRight()">右侧出</button>
        <div id="sequence">
            <div style="height: 101px"></div>
            <div style="height: 50px"></div>
            <div style="height: 30px"></div>
        </div>
    </div>
</div>
<script>
    var sequenceDom = document.getElementById("sequence");
    var inputDom = document.getElementById("in");

    /**
     * 获取input值
     */
    function getInputValue() {
        var value = inputDom.value - 0;
        console.log(typeof value)
        if (typeof value != "number") {
            return alert('请输入10~100之间的数字!');
        } else if (value < 10 || value > 100) {
            return alert('请输入10~100之间的数字!');
        }
        return value;
    }
    function insertLeft() {
        var value=getInputValue();
        if(!value) return;
        var div = document.createElement("div");
        div.style.height =  value+'px';
        sequenceDom.insertBefore(div, sequenceDom.children[0]);
    }
    function insertRight() {
        var value=getInputValue();
        if(!value) return;
        var div = document.createElement("div");
        div.style.height = value+'px';
        sequenceDom.appendChild(div);
    }
    function removeLeft() {
        var temp = sequenceDom.children[0];
        alert('移除左侧数字：' + temp.style.height.replace('px',''))
        sequenceDom.removeChild(temp);
    }
    function removeRight() {
        var temp = sequenceDom.children[sequenceDom.children.length - 1];
        alert('移除右侧数字：' + temp.style.height.replace('px',''));
        sequenceDom.removeChild(temp);
    }
    sequenceDom.addEventListener('click', function (e) {
        if (e.target && e.target.nodeName === 'DIV') {
            sequenceDom.removeChild(e.target);
        }
    });
</script>
</body>
</html>